<template>
  <div v-if="fileObjectList.length" class="flex justify-center flex-wrap gap-8px">
    <FileObjectDownload v-for="item in fileObjectList" :key="item" :file-json="item" />
  </div>
  <span v-else>{{ t('fileObjectDownload.noFile') }}</span>
</template>

<script setup lang="ts">
import FileObjectDownload from './index.vue'

defineOptions({ name: 'FileObjectDownloadList' })

const props = defineProps({
  fileJsonList: {
    type: String,
    required: true
  }
})

const { t } = useI18n() // 国际化

const fileObjectList = ref<string[]>([]) // 文件对象列表

watchEffect(() => {
  try {
    const list = JSON.parse(props.fileJsonList ?? '[]')
    fileObjectList.value = list.map((item: string) => JSON.stringify(item))
  } catch {
    fileObjectList.value = [] as string[]
  }
})
</script>

<style scoped lang="scss"></style>
